<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JetBrains Toolbox App Extension Options</title>
  <link rel="stylesheet" href="options.css">
</head>
<body>
<div class="options">
  <h1>General Options</h1>
  <div class="option">
    <div class="option__label">
      <label id="lbl-clone">Clone with:</label>
    </div>
    <div class="option__input js-protocol-input-group">
      <input id="rad-https" class="js-protocol-input" type="radio" name="protocol" value="HTTPS"> <label for="rad-https">HTTPS</label>
      /
      <input id="rad-ssh" class="js-protocol-input" type="radio" name="protocol" value="SSH"> <label for="rad-ssh">SSH</label>
    </div>
  </div>
  <div class="option">
    <div class="option__label">
      <label for="chk-modify-page">Add additional buttons to web pages:</label>
    </div>
    <div class="option__input">
      <input id="chk-modify-page" class="js-modify-pages-input" type="checkbox">
    </div>
  </div>
  <div class="option__description">
    In addition to the standard button (the one in the main toolbar of your browser),
    the extension can add additional buttons to clone projects directly to the page, when the above option is on.
    This feature is experimental and may lead to incorrect display of the user interface under certain conditions
    (works for most of the users though):
    <div class="extra-buttons">
      <img class="extra-buttons__image extra-buttons__image-light" src="options-extra-buttons-light.png" alt="Extra buttons added to page">
      <img class="extra-buttons__image extra-buttons__image-dark" src="options-extra-buttons-dark.png" alt="Extra buttons added to page">
    </div>
  </div>
</div>
<script src="options.js"></script>
</body>
</html>
